import React from 'react'
import { Card, Row, Col } from 'antd';
import AnnularFigure from './AnnularFigure';
import DataDisplayCard from './DataDisplayCard';
import HomeBottom from './HomeBottom'

const HomeMiddle = () => {

  const dataCardColStyle = {
    xs: 24,
    sm: 24,
    md: 12,
    lg: 12,
    xl: 12,
  }
  return (
    <Row gutter={[16, 16]}>
      <Col xl={12} lg={24} md={24} sm={24} xs={24}>
        <AnnularFigure />
      </Col>
      <Col xl={12} lg={24} md={24} sm={24} xs={24}>
        <Row gutter={[8, 8]}>
          <Col {...dataCardColStyle}>
            <DataDisplayCard
              explain='指标说明'
              title='今日积分流出'
              data='22455'
              growthRate={{
                week: '12%',
                weekGrowthRate: 'up',
                day: '11%',
                dayGrowthRate: 'down'
              }}
            />
          </Col>
          <Col {...dataCardColStyle}>
            <DataDisplayCard
              explain='指标说明'
              title='今日积分回收'
              data='22455'
              growthRate={{
                week: '12%',
                weekGrowthRate: 'up',
                day: '11%',
                dayGrowthRate: 'down'
              }}
            />
          </Col>
          <Col {...dataCardColStyle}>
            <DataDisplayCard
              explain='指标说明'
              title='今日交易笔数'
              data='22455'
              growthRate={{
                week: '12%',
                weekGrowthRate: 'up',
                day: '11%',
                dayGrowthRate: 'down'
              }}
            />
          </Col>
          <Col {...dataCardColStyle}>
            <DataDisplayCard
              explain='指标说明'
              title='今日运营投放'
              data='22455'
              growthRate={{
                week: '12%',
                weekGrowthRate: 'up',
                day: '11%',
                dayGrowthRate: 'down'
              }}
            />
          </Col>
        </Row>
      </Col>
    </Row>
  )
}

export default HomeMiddle